<template>
  <div class='header' >
      <div class='h-left' v-show="move">
        <span class='iconfont'>&#xe604; </span>
      </div>
      <div class='h-top' v-show="!move" :style="styleOpacity">
          <span class='iconfont'>&#xe604; </span>
          <p>景区名称名称</p>
      </div>
      <div style="height:1000px; background:#fff;">

      </div>
  </div>
</template>

<script>

export default {
  name: 'Header',
  data(){
      return{
          move:true,
          styleOpacity:{
              opacity:0
          }
      }
  },
  mounted(){
      let that=this;
      window.addEventListener("scroll",function(){
          let top=document.documentElement.scrollTop;
          if(top>45){
              let opacity =top/130;
              opacity=opacity>1?1:opacity;
              that.styleOpacity={opacity};
              that.move=false
          }else{
              that.move=true
          }
      });
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='stylus'>
  @import '~css/web.styl'
  .header{
    width:100%;
    line-height:.88rem;
    
    color: #fff;
    font-size: .36rem;
    display: flex;
  }
  .h-left{
    width: .72rem
    height .72rem
    border-radius 100%
    text-align center
    line-height .72rem
    position absolute
    top .1rem
    left .1rem
    background-color  rgba(0,0,0,0.5)
  }
  .h-top{
      position fixed
      top 0
      width 100%
      height .9rem
      text-align center
      background:$bgColor;
      color #fff
      opacity 0
  }
  .h-top .iconfont{
      position absolute
      left .3rem
      color #fff
  }
</style>
